<template>
    <div>
      <comDemoE title="梅菜扣肉" price="50"/>
      <comDemoE title="酸菜鱼" price="38"/>
      <comDemoE title="毛血旺" price="30"/>
  
      <comDemoE 
        v-for="obj in list"
        :key="obj.id"
        :id="obj.id"
        :title="obj.title"
        :price="obj.price"
        @toPrice="changeListPriceHandler"/>
  
        <comDemoE :title="title" :price="price" @toPrice="changePriceHandler"/>
    </div>
  </template>
  
  <script>
  import comDemoE from './components/comDemoE.vue';
  export default {
    components:{
      comDemoE
    },
    data(){
      return{
        title: '粽子',
        price: 100,
        list: [
          {id: '111', title: '口水鸡', price: '50'},
          {id: '222', title: '水煮鱼', price: '48'},
          {id: '333', title: '宫保鸡丁', price: '30'},
          {id: '444', title: '蛋炒饭', price: '15'},
          {id: '555', title: '辣椒炒肉', price: '28'},
          {id: '666', title: '杏鲍菇炒肉片', price: '38'},
          {id: '777', title: '牛瘪火锅', price: '285'}
        ]
      }
    },
    methods:{
      changeListPriceHandler(val,id){
        console.log('changeListPriceHandler',val);
        this.list.forEach(obj=>{
          if(obj.id === id){
            obj.price = (obj.price * val / 10).toFixed(2)
          }
        })
      },
      changePriceHandler(val){
        console.log('changePriceHandler');
        console.log(val);
        this.price = (this.price * val / 10).toFixed()
      }
    }
  }
  </script>
  
  <style>
  
  </style>